<template>
	<view class="container">
		<navbar title="账户信息"></navbar>
		<view class="wrap">
			<view class="account-item">
				<label>真实信息</label>
				<view class="account-item-con">
					<input type='text' placeholder="请输入你的真实姓名" v-model="form.realname"/>
				</view>
			</view>
			<view class="account-item">
				<label>身份信息</label>
				<view class="account-item-con">
					<input type='text' placeholder="请输入身份证" v-model="form.idNum"/>
				</view>
			</view>
			<view class="account-item">
				<label>开户行</label>
				<view class="account-item-con">
					<input type='text' placeholder="请输入开户银行" v-model="form.bankName"/>
				</view>
			</view>
			<view class="account-item">
				<label>银行卡号</label>
				<view class="account-item-con">
					<input type='text' placeholder="请输入银行卡卡号" v-model="form.cardNum"/>
				</view>
			</view>
			<view class="account-item">
				<label>预留手机号</label>
				<view class="account-item-con">
					<input type='text' placeholder="请输入手机号" v-model="form.bankMobile"/>
				</view>
			</view>
		</view>
		<button class="save-btn line-center" :disabled="isDisabled" :loading="isDisabled" @tap='saveData'>保存</button>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				form:{
					realname:'',
					idNum:'',
					bankName:'',
					cardNum:'',
					bankMobile:''
				},
				isDisabled:false,
			};
		},
		onLoad() {
			this.getData()
		},
		methods:{
			getData(){
				app.globalRequest({
					api: app.getApi().promotion.getUserAccount,
				}).then(res => {
					if (res.code == 0) {
						this.form.realname = res.data.realname
						this.form.idNum = res.data.idNum
						this.form.bankName = res.data.bankName
						this.form.cardNum = res.data.cardNum
						this.form.bankMobile = res.data.bankMobile
					} 
				}).catch(err => {
					
				})
			},
			saveData(){
				const that = this;
				let form = that.form;
				if(!form.realname){
					uni.showToast({
						title:'请输入真实姓名',
						icon:'none',
						mask: true
					})
					return;
				}
				if(!form.idNum){
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
						mask: true
					})
					return;
				}
				if(!form.bankName){
					uni.showToast({
						title: '请输入开户银行',
						icon: 'none',
						mask: true
					})
					return;
				}
				if(!form.cardNum){
					uni.showToast({
						title: '请输入银行卡卡号',
						icon: 'none',
						mask: true
					})
					return;
				}
				if(!form.bankMobile){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(form.bankMobile))) {
					uni.showToast({
						title: "手机号码不合法，请重新输入",
						icon: 'none',
						mask: true
					});
					return;
				}
				that.isChecked = true;
				app.globalRequest({
					api: app.getApi().promotion.saveUserAccount,
					method:'POST',
					data:form
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
							that.isChecked = false;
						},200)
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						});
						that.isChecked = false;
					}
				}).catch(err => {
					that.isChecked = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		margin:0 24rpx;
	}
	.account-item{
		width: 100%;
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		margin-top:24rpx;
		padding:0 24rpx;
		box-sizing: border-box;
		label{
			width: 140rpx;
			font-weight: bold;
			font-size: 28rpx;
			margin-right: 10rpx;
		}
		.account-item-con{
			flex:1;
			height: 100%;
			input{
				width: 100%;
				height: 100%;
				font-size: 28rpx;
			}
		}
	}
	.save-btn{
		width: 640rpx;
		height: 94rpx;
		background: #52B148;
		border-radius: 48rpx;
		margin:274rpx auto 0;
		color:#FFFFFF;
		font-size: 32rpx;
	}
</style>
